<template>
    <div class="mx-auto w-full z-header">
        <div class="relative z-10 pb-8 bg-transparent sm:pb-6 md:pb-8 lg:w-full lg:pb-10 xl:pb-12">
            <Popover>
                <div class="relative pt-6 px-4 sm:px-6 lg:px-8">
                    <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start"
                        aria-label="Global">
                        <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
                            <div class="flex items-center justify-between w-full md:w-auto">
<!--                                    <img class="h-8 w-auto sm:h-10" src="@/assets/image/logo.png" />-->
                                  <span class="serif-sc-font text-prRed text-2xl font-bold">
                                    中国国家地理
                                  </span>
                                <div class="flex items-center">
                                    <PopoverButton @click="isShowing = true"
                                        class="visible md:invisible bg-transparent rounded-none p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                                        <MenuIcon class="h-6 w-6" aria-hidden="true" />
                                    </PopoverButton>
                                </div>
                            </div>
                        </div>
                        <div class="hidden md:block ml-auto pr-4 space-x-8 cursor-pointer">
                            <a v-for="item in navigation" :key="item.name"
                                class="font-medium text-gray-500 hover:text-gray-900">{{ item.name }}</a>
                        </div>
                    </nav>
                </div>
                <TransitionRoot :show="isShowing" enter-active-class=" transition duration-500 delay-100 ease-in"
                    enter-from-class="opacity-0" enter-to-class="opacity-100"
                    leave-active-class=" transition duration-500 delay-100 ease-out" leave-from-class="opacity-100"
                    leave-to-class="opacity-0">
                    <PopoverPanel
                        class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
                        <div class="shadow-md bg-white rounded-none ring-1 ring-black ring-opacity-5 overflow-hidden"
                            ref="target">
                            <div class="px-5 pt-4 flex items-center justify-between">
                                <div>
                                 <span class="serif-sc-font text-prRed text-2xl font-bold">
                                    中国国家地理
                                  </span>
                                </div>
                                <div class="-mr-2">
                                    <PopoverButton @click="isShowing = false"
                                        class="bg-white rounded-none p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                                        <span class="sr-only">Close menu</span>
                                        <XIcon class="h-6 w-6" aria-hidden="true" />
                                    </PopoverButton>
                                </div>
                            </div>
                            <div class="px-2 pt-2 pb-3 space-y-1">
                                <a v-for="item in navigation" :key="item.name" :href="item.href"
                                    class="block px-3 py-2 rounded-none text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-blue-50">{{ item.name }}</a>
                            </div>
                        </div>
                    </PopoverPanel>
                </TransitionRoot>
            </Popover>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import {
        Popover,
        PopoverButton,
        PopoverPanel
    } from '@headlessui/vue'
    import {
        MenuIcon,
        XIcon
    } from '@heroicons/vue/outline'
    const isShowing = ref(false)
    const navigation = [{
            name: '首页',
            href: '#'
        },
        {
            name: '产品与服务',
            href: '#'
        },
        {
            name: '行业案例',
            href: '#'
        },
        {
            name: '关于我们',
            href: '#'
        },
    ]
</script>

<style scoped lang="scss">
.z-header{
  user-select: none;
  -webkit-user-drag: none;
}
</style>